<template>
  <div class="box">
    <h3>作业1-简易计算器</h3>
    <input type="text" v-model="num1">

    <select v-model="operator">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>

    <input type="text" v-model="num2">
      <span class="equal-box" @click="calculator">=</span>
    <input type="text" v-model="result">
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

let num1 = ref(0);
let num2 = ref(0);
let operator = ref('+');
let result = ref(0);

const calculator = () => {
  switch (operator.value) {
    case "+":
      result.value = parseInt(num1.value) + parseInt(num2.value)
      break;
    case "-":
      result.value = parseInt(num1.value) - parseInt(num2.value)
      break;
    case "*":
      result.value = parseInt(num1.value) - parseInt(num2.value)
      break;
    case "/":
      result.value = parseInt(num1.value) - parseInt(num2.value)
      break;
  }

}

</script>

<style scoped>

.equal-box {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 2px 4px;
  font-weight: bold;
}
</style>
